<template>
  <div class="drawer-modular">
    <el-drawer title="标题" :visible.sync="drawerVisible" :with-header="false" :size="size" :before-close="close"
      :modal="true">
      <div class="drawer-title">{{ drawerTitle }}</div>
      <div class="drawer-content">
        <div style="width: 500px">
          <el-scrollbar v-if="item" wrap-class="scrollbar-wrapper">
            <div class="details-box">
              <div v-for="(row, index) in info" :key="index" class="aloneInfo">
                <div v-if="row.isShow(item)">
                  <div v-if="row.type === 'text'" class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend">
                      <p style="width: 110px;white-space: normal;">{{ row.label }}</p>
                    </div>
                    <div v-if="typeof row.key === 'string'" class="el-input__inner">{{ item[row.key] }}</div>
                    <div v-else class="el-input__inner">{{ row.key(item) }}</div>
                  </div>
                  <div v-if="row.type === 'file'" class="el-input el-input-group el-input-group--prepend fileType">
                    <div class="el-input-group__prepend">
                      <p style="width: 110px;white-space: normal;">{{ row.label }}</p>
                    </div>
                    <div v-if="typeof row.key === 'string'" class="el-input__inner">{{ item[row.key] }}
                    </div>
                    <div v-else class="el-input__inner">{{ row.key(item) }}</div>
                    <div class="el-input-group__append">
                      <i class="el-icon-download successType wb-fw-b" />
                    </div>
                  </div>
                  <div v-if="row.type === 'img'" class="el-input el-input-group el-input-group--prepend fileType">
                    <div class="el-input-group__prepend">
                      <p style="width: 110px;white-space: normal;">{{ row.label }}</p>
                    </div>
                    <div class="el-input__inner">
                      <zk-image
                        v-for="(imgr, imgi) in item[row.key] && item[row.key].length ? item[row.key].split(',') : []"
                        :key="`img-${imgi}`"
                        :style-custom="`width: 39px; height: 39px;margin-top: 15px;${imgi ? 'margin-left: 15px;' : ''}`"
                        :url="imgr" :preview-handle="{ status: true, str: ',', previewStr: item[row.key] }" />
                    </div>
                  </div>
                  <div v-if="row.type === 'editor'" class="el-input el-input-group el-input-group--prepend fileType">
                    <div class="el-input-group__prepend">
                      <p style="width: 110px;white-space: normal;">{{ row.label }}</p>
                    </div>
                    <div class="el-input__inner">
                      <div v-html="item[row.key]"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>

        <div v-if="item" class="left_div">
          <div class="rawListTit">费用列表</div>
          <el-table :data="item.mallGoodsRentFeeList" :height="`calc(100vh - 100px - 110px)`"
            style="border-radius: 4px 4px 4px 4px;">
            <el-table-column label="起租月数" prop="num" align="center" min-width="120" :show-overflow-tooltip="true" />
            <el-table-column label="押金" prop="rentDepositPrice" align="center" min-width="120"
              :show-overflow-tooltip="true" />
            <el-table-column label="月租金" prop="rentPrice" align="center" min-width="120"
              :show-overflow-tooltip="true" />
            <el-table-column label="租客中介费" prop="customerAgencyPrice" v-if="item.sourceName == '中介挂靠'" align="center"
              min-width="120" :show-overflow-tooltip="true" />
            <el-table-column label="房东中介费" prop="landlordAgencyPrice" v-if="item.sourceName == '中介挂靠'" align="center"
              min-width="120" :show-overflow-tooltip="true" />
          </el-table>
        </div>
      </div>

      <div class="drawer-btn">
        <el-button @click="close">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getGoods } from "@/api/mall/goods";
export default {
  components: {},
  props: {
    // 窗口宽度
    size: {
      type: String,
      default: "calc(100vw - 200px)"
    },
    //属性list
    attrList: {
      type: Array,
      default: () => []
    },
    // 地标list
    landmarkList: {
      type: Array,
      default: () => []
    },
    // 状态list
    statusList: {
      type: Array,
      default: () => []
    },
    // 来源list
    sourceList: {
      type: Array,
      default: () => []
    },
    // 基础设施list
    facilityList: {
      type: Array,
      default: () => []
    },
    // 推荐list
    recommendList: {
      type: Array,
      default: () => []
    },
    // 自行看房
    selfViewList: {
      type: Array,
      default: () => []
    },
    // 类型list
    typeList: {
      type: Array,
      default: () => []
    },
    // 小区list
    quarterList: {
      type: Array,
      default: () => []
    },
    // 出租状态list
    rentStatusOptions: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      drawerVisible: false, // 窗口显示状态
      drawerTitle: "房源详情", // 窗口标题
      item: null, // 详情内容
      info: [] // 详情展示列表
    };
  },
  created() {
    this.info = [
      {
        isShow: (data) => { return true },
        type: "text",
        label: "房屋标题",
        key: "title"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "房屋副标题",
        key: "sideTitle"
      },
      {
        isShow: (data) => { return true },
        type: "img",
        label: "展示图",
        key: "logo"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "联系人",
        key: "contactPerson"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "联系电话",
        key: "contactPhone"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "设备id",
        key: "deviceId"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "设备密码",
        key: "devicePassword"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "定金",
        key: data => { return '￥' + (data.depositPrice) }
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "小区",
        key: "quarterName"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "出租状态",
        key: (data) => {
          let txt = '-'
          this.rentStatusOptions.forEach(res => {
            if ((data.rentStatus + '') === res.dictValue) {
              txt = res.dictLabel
            }
          })
          return txt
        }
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "属性",
        key: "attrNames"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "地标",
        key: "landmarkNames"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "出租状态",
        key: (data) => {
          let txt = '-'
          this.rentStatusOptions.forEach(res => {
            if ((data.rentStatus + '') === res.dictValue) {
              txt = res.dictLabel
            }
          })
          return txt
        }
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "基础设施",
        key: (data) => {
          let txt = ""
          this.facilityList.forEach(res => {
            txt += res.facilityName + ","
          })
          return txt
        }
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "房源类型",
        key: "typeName"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "来源",
        key: (data) => {
          let txt = '-'
          this.sourceList.forEach(res => {
            if ((data.sourceId) === res.id) {
              txt = res.sourceName
            }
          })
          return txt
        }
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "状态",
        key: (data) => {
          let txt = '-'
          this.statusList.forEach(res => {
            if ((data.status + '') === res.value) {
              txt = res.label
            }
          })
          return txt
        }
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "推荐",
        key: (data) => {
          let txt = '-'
          this.recommendList.forEach(res => {
            if ((data.isRecommend + '') === res.value) {
              txt = res.label
            }
          })
          return txt
        }
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "自行看房",
        key: (data) => {
          let txt = '-'
          this.selfViewList.forEach(res => {
            if ((data.selfView + '') === res.value) {
              txt = res.label
            }
          })
          return txt
        }
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "省/市/区",
        key: "province",
        key: data => { return (data.province) + '/' + (data.city) + '/' + (data.county) }
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "经纬度",
        key: data => { return '经度:' + (data.lat) + '/纬度:' + (data.lng) }
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "房屋地址",
        key: "address"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "单元房号",
        key: "roomLocation"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "房屋面积",
        key: "area"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "楼层",
        key: "floor"
      },
      {
        isShow: (data) => { return true },
        type: "text",
        label: "创建时间",
        key: "createTime"
      },
      {
        isShow: (data) => { return true },
        type: "img",
        label: "图集",
        key: "images"
      },
      {
        isShow: (data) => { return true },
        type: "editor",
        label: "房屋详情",
        key: "details"
      },
    ];
  },
  methods: {
    /** 详情-显示 */
    show(item) {
      this.drawerVisible = true;
      getGoods(item.id).then(res => {
        if (res.code === 200) {
          this.item = res.data;
          console.log("详情", this.item);
        }
      });
    },

    /** 关闭抽屉 */
    close() {
      this.drawerVisible = false;
      this.emptyData();
    },

    /**清空数据源 */
    emptyData() {
      this.item = null;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/drawerModules.scss";

::v-deep .el-table__fixed-right-patch {
  background-color: #f8f8f8;
}

.drawer-content {
  display: flex;

  .left_div {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    margin-right: 30px;
    border: 1px solid #dfe6ec;
    border-radius: 4px 4px 4px 4px;
  }

  .showtips {
    position: absolute;
    height: 100%;
    /* margin-right: 10px; */
    right: 0px;
    top: 0px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
  }

  .rawListTit {
    font-size: 14px;
    color: #666;
    padding: 14px 20px;
    border-radius: 4px 4px 0 0;
    background-color: #f8f8f8;
    border-bottom: none;
  }
}
</style>
